<template>
    <el-tabs model-value="cms">
        <el-tab-pane label="内容设置" name="cms">
            <div class="cms_box">
                <div class="d_flex flex_ai_c">
                    <label>提示文字</label>
                    <mi-input v-model="component.info.style.placeholder" />
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="style">
            <el-form label-width="90px" class="style_box">
                <el-form-item label="组件背景">
                    <el-color-picker v-model="component.info.style.container_background" />
                </el-form-item>
                <el-form-item label="搜索框背景">
                    <el-color-picker v-model="component.info.style.input_background" />
                </el-form-item>
                <el-form-item label="搜索框样式">
                    <mi-radio v-model="component.info.class.radius"
                              :options="[{id:'right', title:'直角'}, {id:'fillet', title:'圆角'}, {id:'circle', title:'圆形'}]" />
                </el-form-item>
                <el-form-item label="下边距">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-slider v-model="component.info.style.margin_bottom" />
                        </el-col>
                        <el-col :span="8">
                            <mi-input-number v-model="component.info.style.margin_bottom" controls-position="right" controls size="small" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="左右边距">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-slider v-model="component.info.style.margin_x" />
                        </el-col>
                        <el-col :span="8">
                            <mi-input-number v-model="component.info.style.margin_x" controls-position="right" controls size="small" />
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">

import {inject} from "vue";

const component : any = inject("selectedComponent")

if (!component.info.config || component.info.config.length == 0){
    component.info.config = {
        cate_id:0,
        num:3
    }
}

</script>

<style scoped lang="scss">
.cms_box{
    font-size: 14px;
    padding: 10px;
    label{
        width: 80px; flex-shrink: 0;
    }
}
.style_box{
    padding: 10px;
    .el-input-number{
        width: 100% !important;
    }
    .el-row{
        width: 100%;
    }
}
</style>
